<template>
  <div class="container">
    <div class="login-form">
      <h3>电影后台管理</h3>
      <!-- :model和之前在表单项中使用v-model的作用类型 -->
      <!-- form -->
      <el-form :model="userData" :rules="createRules()" status-icon label-width="100px" class="form" ref="loginRef">
        <!-- label标签 prop它是userData对象中的属性，同时rules验证key名称是和他一致 -->
        <el-form-item label="账号：" prop="username">
          <!-- input -->
          <el-input v-model="userData.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码：" prop="password">
          <el-input v-model="userData.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <!-- loading属性完成，登陆防抖功能 -->
          <el-button type="primary" :loading="loading" @click="submitForm">进入系统</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <img :src="loginJpg" alt="" />
    </div>
  </div>
</template>

<script>
import loginJpg from '@/assets/login.jpg'

export default {
  // data配置中的数据它会是响应式，验证条件无需响应式，所以写在此处性能不太好
  data() {
    return {
      loginJpg,
      loading: false,
      userData: {
        username: 'admin',
        password: 'admin'
      }
    }
  },
  methods: {
    createRules() {
      // 验证规则
      return {
        // 内置验证条件 它使用了此库 async-validator
        username: [
          // 内置验证条件 https://github.com/yiminghe/async-validator
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { type: 'string', min: 2, message: '长度不能小于2位' },
          {
            // 自定义验证规则
            validator: (rule, value, callback) => {
              if (/^\s+$/.test(value)) {
                return callback(new Error('账号不能用空格'))
              }
              callback()
            }
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          {
            // 自定义验证规则
            validator: (rule, value, callback) => {
              if (/^\s+$/.test(value)) {
                return callback(new Error('密码不能用空格'))
              }
              callback()
            }
          }
        ]
      }
    },

    // 添加表单
    submitForm() {
      this.loading = true
      // 进行表单项的验证,回调函数中的参数是一个验证的结果true/false
      // 验证通过为true,不通过为false
      this.$refs['loginRef'].validate(async valid => {
        if (valid) {
          let ret = await this.$store.dispatch('user/setUserAction', this.userData)
          if (ret) {
            // 登录成功后，跳转到后台的首页
            this.$router.push('/admin/main')
          } else {
            // 弹框组件没有像vant组件中的弹出时有遮罩层，所以需要对按钮添加防抖功能
            this.$message.error({
              message: '账号或密码不正确',
              duration: 1500,
              onClose: () => (this.loading = false)
            })
          }
        } else {
          this.$message.error({
            message: '账号和密码验证失败，请认真填写',
            duration: 1500,
            onClose: () => (this.loading = false)
          })
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 600px;
  height: 300px;
  margin: 50px auto;
  background: #fff;
  display: flex;
  justify-content: space-between;
  img {
    width: 200px;
    height: 300px;
  }
  .login-form {
    flex: 1;
    h3 {
      width: 100%;
      text-align: center;
      padding: 20px;
    }
    .form {
      margin-right: 30px;
    }
  }
}
</style>
